<!DOCTYPE html><html lang="cs"><head><meta charset="utf-8"><meta name="generator" content="xidoc"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.svg" /><title>Hlášky</title><script type="module">let l="";window.math=()=>{let m=import("./matext.min.js");let t=prompt("Zadejte matematiku v LaTeX z\xe1pisu",l);return t?m.then(({default:r})=>r(l=t,{oneLine:true})):new Promise((y,n)=>n("Input cancelled"))};window.ins=(i,c)=>{let t=document.getElementById(i);t.setRangeText(c,t.selectionStart,t.selectionEnd,"end");t.focus()}</script><link rel="stylesheet" href="awesomplete/awesomplete.min.css" /><script type="module">import { softReloadSetup, softReloadForm } from "./soft-reload.js";
  softReloadSetup(["quotes"]);
  softReloadForm(document.getElementById("new-quote"), ["quotes"], { reset: true })
  softReloadForm(document.getElementById("search"), ["quotes"])
  document.addEventListener("keyup", (event) => {
    const newQuote = document.getElementById("new-quote");
    if (event.ctrlKey && event.key === "Enter") {
      event.preventDefault();
      if (newQuote.contains(document.activeElement)) {
        newQuote.submit();
      }
    }
    if (event.altKey && event.key === "a") {
      event.preventDefault();
      if (newQuote.contains(document.activeElement)) {
        document.getElementById("new-quote-author").focus();
      }
    }
  });</script><style>:root{--serif:Constantia,"Lucida Bright",Lucidabright,"Lucida Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation Serif",Georgia,serif;}
:root{--sans-serif:-apple-system,BlinkMacSystemFont,"Avenir Next",Avenir,"Nimbus Sans L",Roboto,Noto,"Segoe UI",Arial,Helvetica,"Helvetica Neue",sans-serif;}
:root{--bg-accent:#0D375E;}
:root{--fg-accent:#F59F00;}
a{color:var(--fg-accent);}
body{accent-color:var(--fg-accent);
background:#000;
color-scheme:dark;
color:#fff;
font-family:var(--sans-serif);
line-height:1.4;
margin:auto;
max-width:800px;}
button,a.button{background:var(--bg-accent);
border:none;
border-radius:.2rem;
color:inherit;
cursor:pointer;
font-weight:600;
padding:.5rem;
text-decoration:none;}
h1{text-align:center;}
h1,h2,h3,h4,h5,h6{color:var(--fg-accent);
margin-block-end:0;}
input,select,textarea,.radios{background:inherit;
border:.15rem solid var(--bg-accent);
border-radius:0 .2rem .2rem .2rem;
color:inherit;
margin:0;
outline:none;}
nav{background:var(--bg-accent);
display:flex;
flex-flow:row wrap;
font-size:1rem;
font-weight:bold;
gap:2rem;
padding:.5rem;}
nav a{color:inherit;
text-decoration:none;}
strong{color:var(--fg-accent);}
summary{width:fit-content;
cursor:pointer;}
.error{background:#7D1A1A;
border:.2rem solid #7D1A1A;
border-radius:.2rem;
margin-block-start:.5rem;
padding:.4rem;}
.labeled-input>label{background:var(--bg-accent);
border-radius:.2rem .2rem 0 0;
display:block;
font-size:.7rem;
padding:.2rem .2rem 0 .2rem;
text-transform:uppercase;
width:fit-content;}
.textarea-with-buttons{display:flex;
flex-flow:row nowrap;
gap:.2rem;}
.textarea-with-buttons>.awesomplete{width:100%;}
.textarea-with-buttons textarea{border-radius:0 .2rem .2rem 0;
height:4.2rem;
width:100%;
resize:none;
box-sizing:border-box;}
.character-buttons{display:grid;
grid-template-columns:auto auto auto auto;
gap:.2rem;}
.character-buttons>button{padding:0;
width:1.6rem;
height:2rem;}
.labeled-input:focus-within{--bg-accent:var(--fg-accent);}
.labeled-input:focus-within>label,.labeled-input:focus-within button{color:#000;}
.list-options{display:flex;
flex-flow:row wrap;
align-items:flex-end;
gap:.3rem;}
.id{font-weight:bold;
color:#979B9D;}
.author{font-weight:bold;
font-style:normal;}
.text{font-family:var(--serif);}
.text::before,.text::after{content:"";}
.context{font-family:var(--serif);
font-style:italic;}
.datetime,.writer{color:#979B9D;}
.english{color:#D1D6D8;}
.name,.bracket,.the-author{font-family:var(--sans-serif);
font-weight:bold;}
.bracket{color:#D1D6D8;}
.the-author{color:#E03131;}body{display:grid;
grid-template-columns:100%;}
body>*{padding:0 0.5rem;}
.quote{border:2px solid #666968;
padding:0.5rem;
margin-top:0.5rem;}
.quote>summary{width:100%;
list-style:none;}
@media only screen and (min-width: 1200px){html,body{height:100%;}
body{max-width:1600px;
grid-template-columns:50% 50%;
grid-template-rows:100%;
overflow:hidden;}
body>*{overflow-y:auto;
height:100%;}}
.loading{opacity:0.3;}</style></head><body><div>

<header><h1>Hlášky</h1>
<nav><a href="./">Seznam</a>
<a href="./stats.py">Statistika</a>
<a href="./about.html">O Hláškách</a>
<a href="./hlaskotest.py">Hláškotest</a></nav></header>
<script defer src="awesomplete/awesomplete.min.js" onload="for (const input of document.querySelectorAll('input[list]')) {
  input.addEventListener('focus', () => input.select());
  new Awesomplete(input, { minChars: 1, autoFirst: true });
}
new Awesomplete(document.querySelector('#new-quote-text'), {
  list: document.querySelector('#people-names'),
  filter: (text, input) => {
    const match = input.match(/\[([^[]+)$/); //]]
    return match && Awesomplete.FILTER_CONTAINS(text, match[1]);
  },
  replace: function(text) {
    this.input.value = this.input.value.replace(/\[([^[]+)$/, '[' + text + '] '); //]]
  },
});"></script>
{people_names_datalist}
<section><h2 class="xd-section-heading">Přidat hlášku</h2>{banners}
<form id="new-quote" method="POST" class="quote"><div class="labeled-input"><label for="new-quote-author">Autor</label>
<input id="new-quote-author" name="new-quote-author" type="text" list="people-names" autocomplete="off" placeholder="Příjmení Jméno" required /></div>
<div class="labeled-input"><label for="new-quote-text">Text</label>
<div class="textarea-with-buttons"><textarea id="new-quote-text" name="new-quote-text" class="text"></textarea>
<div class="character-buttons"><button type="button" tabindex="-1" onclick="ins('new-quote-text','–')">–</button>
<button type="button" tabindex="-1" onclick="ins('new-quote-text','—')">—</button>
<button type="button" tabindex="-1" onclick="ins('new-quote-text','…')">…</button>
<button type="button" tabindex="-1" onclick="math().then(m=>ins('new-quote-text',m)).catch(()=>{})">∑</button>
<button type="button" tabindex="-1" onclick="ins('new-quote-text','„')">„</button>
<button type="button" tabindex="-1" onclick="ins('new-quote-text','“')">“</button>
<button type="button" tabindex="-1" onclick="ins('new-quote-text','”')">”</button></div></div></div>
<div class="labeled-input"><label for="new-quote-context">Kontext</label>
<div class="textarea-with-buttons"><textarea id="new-quote-context" name="new-quote-context" class="context"></textarea>
<div class="character-buttons"><button type="button" tabindex="-1" onclick="ins('new-quote-context','–')">–</button>
<button type="button" tabindex="-1" onclick="ins('new-quote-context','—')">—</button>
<button type="button" tabindex="-1" onclick="ins('new-quote-context','…')">…</button>
<button type="button" tabindex="-1" onclick="math().then(m=>ins('new-quote-context',m)).catch(()=>{})">∑</button>
<button type="button" tabindex="-1" onclick="ins('new-quote-context','„')">„</button>
<button type="button" tabindex="-1" onclick="ins('new-quote-context','“')">“</button>
<button type="button" tabindex="-1" onclick="ins('new-quote-context','”')">”</button></div></div></div>
<div class="labeled-input"><label for="new-quote-writer">Vaše jméno</label>
<input id="new-quote-writer" name="new-quote-writer" type="text" list="people-names" autocomplete="off" placeholder="Příjmení Jméno" value="Blažek Adam" required /></div>
<button type="submit">⨁ Přidat</button></form></section>
</div>
<section><h2 class="xd-section-heading">Seznam hlášek</h2><form id="search" method="GET" class="list-options"><div class="labeled-input"><label>Počet hlášek</label>
<div class="radios"><input id="num-quotes-100" name="num-quotes" type="radio" value="100" {num_quotes_100} />
<label for="num-quotes-100">prvních 100</label>
<input id="num-quotes-all" name="num-quotes" type="radio" value="0" {num_quotes_all} />
<label for="num-quotes-all">všechny</label></div></div>
<div class="labeled-input"><label>Seřadit</label>
<div class="radios"><input id="sorting-newest" name="sorting" type="radio" value="newest" {sorting_newest} />
<label for="sorting-newest">od nejnovější</label>
<input id="sorting-oldest" name="sorting" type="radio" value="oldest" {sorting_oldest} />
<label for="sorting-oldest">od nejstarší</label>
<input id="sorting-random" name="sorting" type="radio" value="random" {sorting_random} />
<label for="sorting-random">náhodně</label></div></div>
<div class="labeled-input"><label for="filter-author">Autor</label>
<input id="filter-author" name="filter-author" type="text" value="{filter_author}" list="people-names" autocomplete="off" /></div>
<div class="labeled-input"><label for="filter-text-context">Text/Kontext</label>
<input id="filter-text-context" name="filter-text-context" type="text" value="{filter_text_context}" /></div>
<div class="labeled-input"><label for="language-select">Jazyk</label>
<select id="language-select" name="language"><option value="original" {lang_original}>Původní</option>
<option value="english" {lang_english}>Angličtina</option>
<option value="both" {lang_english}>Obojí</option></select></div>
<button type="submit">👁 Zobrazit</button></form>
<div id="quotes"><p>Zobrazeno <strong>{num_displayed_quotes}</strong> z celkem <strong>{num_total_quotes}</strong> hlášek. Kliknutím na hlášku zobrazíte více informací.</p>
{quotes}</div></section>
</body></html>